<template>
  <h3>设备台账</h3>
  <el-row style="margin-top: 10px">
    <!-- 分类搜索栏 -->
    <el-col :span="3" style="margin-right: 50px">
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入分类名称"/>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="20">
      <el-row>
        <el-form :model="ledgerQuery" inline>
          <el-form-item label="设备编码">
            <el-input v-model="ledgerQuery.ledgerEncode" placeholder="请输入设备编码"/>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="ledgerQuery.ledgerName" placeholder="请输入设备名称"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadLedgers">搜索</el-button>
            <el-button @click="reloadLedgers">重置</el-button>
            <el-button type="info" @click="ledgerExport">导出</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 工具栏 -->
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="toAdd">新增</el-button>
          <el-button type="primary" @click="toEdits">修改</el-button>
          <el-button type="primary" @click="toDelete">删除</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-row>
        <el-col :span="24" style="margin-top: 10px">
          <el-table
              :data="ledgers"
              stripe
          ><!-- stripe可以为表格添加斑马纹样式，默认false -->
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="ledgerEncode" label="设备编码" width="100" align="center">
              <template #default="scope">
                <el-link @click="showDetail(scope.row.ledgerId)" type="primary">{{ scope.row.ledgerEncode }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="ledgerName" label="设备名称" width="100" align="center"/>
            <el-table-column prop="ledgerBrand" label="品牌" width="100" align="center"/>
            <el-table-column prop="ledgerModel" label="规格型号" width="150" align="center"/>
            <el-table-column prop="ledgerWorkshop" label="所属车间" width="100" align="center">
              <template #default="scope">
                <el-tag type="primary" v-if="scope.row.ledgerWorkshop == 0">家用车间</el-tag>
                <el-tag type="success" v-else-if="scope.row.ledgerWorkshop == 1">军用车间</el-tag>
                <el-tag type="info" v-else-if="scope.row.ledgerWorkshop == 2">企业车间</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="ledgerStatus" label="设备状态" width="100" align="center">
              <template #default="scope">
                <el-tag type="primary" v-if="scope.row.ledgerStatus == 1">开机</el-tag>
                <el-tag type="danger" v-else>停机</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="200" align="center"/>
            <el-table-column label="操作" width="150" align="center">
              <template #default="scope">
                <el-button-group>
                  <el-button size="small" type="primary" @click="editLedger(scope.row.ledgerId)">修改</el-button>
                  <el-button size="small" type="danger" @click="deleteLedger(scope.row)">删除</el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <!-- 新增台账子组件弹窗 -->
  <ledger-add :ledgerFlag="addLedger" @cancelAdd="cancelAdd" @addComplete="loadLedgers"/>
  <!-- 编辑台账子组件弹窗 -->
  <ledger-edit :ledgerId="editLedgerId" @cancelEdit="cancelEdit" @editComplete="loadLedgers"/>
  <!-- 详情台账子组件弹窗 -->
  <ledger-detail :ledgerId="detailLedgerId" @cancelDetail="cancelDetail"/>
</template>
<script setup>

// 封装查询条件
import {onMounted, ref} from "vue";
import ledgerRequest from "@/api/ledger.js";
import LedgerAdd from "@/views/device/ledger-add.vue";
import LedgerEdit from "@/views/device/ledger-edit.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import LedgerDetail from "@/views/device/ledger-detail.vue";

// 封装查询条件
let ledgerQuery = ref({});
// 封装查询的结果集合
let ledgers = ref([]);
// 新增的addLedger
let addLedger = ref(-1);
// 编辑的editLedgerId
let editLedgerId = ref(-1);
// 详情的detailLedgerId
let detailLedgerId = ref(-1);

function loadLedgers(){
  ledgerRequest.loadLedgers(ledgerQuery.value,res=>{
    ledgers.value = res.data;
  })
}

function reloadLedgers(){
  ledgerQuery.value.ledgerEncode = null;
  ledgerQuery.value.ledgerName = null;
  ledgerRequest.loadLedgers(ledgerQuery.value,res=>{
    ledgers.value = res.data;
  })
}

function toAdd(){
  addLedger.value = 1;
}

function cancelAdd(){
  addLedger.value = -1;
}
function cancelEdit() {
  editLedgerId.value = -1;
}

function editLedger(ledgerId){
  editLedgerId.value = ledgerId;
}

function deleteLedger(ledger){
  ElMessageBox.confirm(
      '您确定要将设备[' + ledger.ledgerName + ']删除吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    ledgerRequest.delete(ledger.ledgerId, res => {
      ElMessage({
        type: "success",
        message: "操作完成"
      });
      loadLedgers();
    })
  }).catch(() => {
  });
}

/**
 * 查看设备详情的绑定函数
 * @param ledgerId
 */
function showDetail(ledgerId) {
  detailLedgerId.value = ledgerId;
}

function cancelDetail(){
  detailLedgerId.value = -1;
}

function ledgerExport(){

}
onMounted(()=>{
  loadLedgers();
})
</script>
<style scoped>

</style>